<template>
  <!-- 普通用户个人主页 -->
  <view class="pages" :style="{ backgroundImage: 'url(' + background + ')' }">
    <view class="bgColor">
      <!-- #ifdef APP-PLUS-->
      <u-sticky z-index="1188" >
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <u-sticky offset-top="-44" z-index="1188" >
        <!-- #endif -->
          <view :style="{ height: tops + 'px' ,backgroundColor: headerBg}"></view>
          <view
            class="header flex-row-between"
            :style="{ paddingTop: '30rpx', backgroundColor: headerBg }"
          >
            <view class="left mar-r-30" @click="toBack">
              <u-icon
                name="arrow-left"
                size="20"
                :color="textColor"
                style="margin-right: 5rpx"
              ></u-icon>
            </view>
            <view class="middle-avatar" v-if="tabflag">
              <image
                :src="
                  userInfo?.avatar ||
                  'https://ossresource.miyingbl.com/def/26b18202402041744061874.jpg'
                "
                class="bor-radius-50 bg-co-ee"
              />
            </view>
            <view class="middle h-flex-column flex-1" v-if="tabflag">
              <view class="name mar-r-10 u-line-1 u-col-center co-33" style="line-height: 27rpx;"
                >{{ userInfo?.nickname }}
                <image
                  class="tag-img"
                  v-if="tagInfo.identity_type == 2"
                  style="width: 34rpx; height: 34rpx"
                  src="@/static/my/x_sex_man.png"
                ></image>
                <image
                  class="tag-img"
                  v-if="tagInfo.identity_type == 1"
                  style="width: 34rpx; height: 34rpx"
                  src="@/static/my/x_sex_woman.png"
                ></image>
                <image
                  class="tag-img"
                  v-if="tagInfo.identity_type == 3"
                  style="width: 34rpx; height: 34rpx"
                  src="@/static/my/x_relatives.png"
                ></image>
              </view>
              <view class="user_tags f-s-26" style="color: #5C5C5C">
                {{ tagInfo?.tag }}
              </view>
            </view>
            <view class="right flex-row-start">
              <view class="change_img mar-r-30 text-center" v-if="tabflag">
                <view class="btn-sure" v-if="!is_self" @click="follow" :class="{ btnFollow: userInfo?.isFollow }">
                  {{ userInfo?.isFollow ? '已关注' : '+关注' }}
                </view>
              </view>
              <view class="right_share text-center" @click="toDetail">
                <!-- <image style="width: 36rpx; height: 30rpx" src="@/static/my/share_1.png" v-if="!xflag" />
                <image style="width: 36rpx; height: 30rpx" src="@/static/my/x_share.png" v-else />
                <view class="f-s-24" :style="{ color: textColor }">分享</view> -->
                <!-- <image src="https://ossresource.miyingbl.com/def/03e43202405231727306873.png" v-if="!xflag"></image>
                <image src="https://ossresource.miyingbl.com/def/cc2ee202405241442129212.png" v-else ></image> -->
              </view>
            </view>
          </view>
      </u-sticky>
      <view class="card bor-radius-16 w-702 mar-0-auto">
        <view class="headers w-100 flex-row-between p-l-20 p-r-20">
          <view class="avatar flex-center mar-r-10">
            <image
              :src="
                userInfo?.avatar ||
                'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
              "
              class="bor-radius-50 bg-co-ee"
            />
          </view>
          <view class="header_moddle flex-1">
            <view class="moddle_top">
              <view class="name u-flex">
                <view>{{ userInfo?.nickname }}</view>                 
                <image
                  v-if="tagInfo.identity_type == 2"
                  style="width: 30rpx; height: 30rpx;margin-left:10rpx;display:block"
                  src="@/static/my/x_sex_man.png"
                ></image>
                <image
                  v-if="tagInfo.identity_type == 1"
                  style="width: 30rpx; height: 30rpx;margin-left:10rpx;display:block"
                  src="@/static/my/x_sex_woman.png"
                ></image>
                <image
                  v-if="tagInfo.identity_type == 3"
                  style="width: 30rpx; height: 30rpx;margin-left:10rpx;display:block"
                  src="@/static/my/x_relatives.png"
                ></image>
                <view class="middle_tag" style="color: #5C5C5C;margin-left:10rpx;">
                  {{ tagInfo?.tag }}
                </view>
              </view>
            </view>
            <view class="f-s-26" style="margin-top: 5rpx;display:flex;color: #5C5C5C;">
              <view style="margin-right:20rpx" >{{ userInfo?.followCount || '0' }}关注</view>
              <view >{{ userInfo?.fansCount || '0' }}粉丝</view>
            </view>
          </view>
          <view class="btn-sure" v-if="!is_self" @click="follow" :class="{ btnFollow: userInfo?.isFollow }">
            {{ userInfo?.isFollow ? '已关注' : '+关注' }}
          </view>
        </view>
        <view class="card_desc p-l-20 p-r-20" style="margin-top: 25rpx;margin-bottom: 30rpx;">
          <view class="co-33 f-s-28 autograph">{{
            userInfo?.autograph || '他很神秘等你自己来发现～'
          }}</view>
        </view>
        <view class="reservation co-whites h-flex p-l-20 p-r-20" v-show="!is_self">
          <view class="reservat_icon">
            <image src="@/static/my/reservat_h.png" style="width:40rpx;height:44rpx;display:block"></image>
          </view>
          <view class="reservat_text co-whites">
            <view class="reservat_top ">直播动态 · 已预约</view>
            <view class="reservat_bottom f-s-26" @click="navigateTo('/pages-user/my-page/trends')">查看历史记录</view>
          </view>
        </view>
      </view>
      <view
        class="week-tabsb"
        :style="{ position: 'sticky', top: weebTop + 'px', zIndex: '1188', backgroundColor: navBg }"
      >
        <u-tabs
          class="tabs-container"
          itemStyle="height:60rpx;padding-left:80rpx;padding-right:80rpx"
          lineWidth="30rpx"
          lineHeight="7rpx"
          lineColor="#00C1B9"
          :inactiveStyle="{ color: '#999999', transform: 'scale(1)' }"
          :activeStyle="{ color: '#333333', fontWeight: 'bold' }"
          :list="tabs"
          :current="current_tab"
          @click="tabClick"
          :scrollable="false"
        ></u-tabs
      ></view>
      <view class="list-content mar-0-auto">
        <view class="none" v-if="(!dynamicList || !dynamicList.length) && !is_self && current_tab === 0 && finishedDy">
          <image class="empty_image" src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"> </image>
          <view class="none_text">暂无内容</view>
        </view>
        <view v-else>
          <view v-show="current_tab === 0" class="content-4">
            <h-hot-list
              :changeDelIcon="changeDelIcon"
              :uid="userInfo?.uid"
              :delShow="true"
              :isShowShare="true"
              :isShowView="false"
              @toLogin="showLogin"
              @updateList="updateListDy"
              @share="share"
              :list="dynamicList"
              @itemTap="gotoDetail"
              v-if="dynamicList && dynamicList?.length"
            ></h-hot-list>
            <h-loading :show="showDyLoading" :showMore="dynamicList.length"></h-loading>
          </view>
        </view>
      </view>
      <!-- 视频列表 -->
      <view v-if="current_tab==1" class="list2 u-flex">
        <view class="listItem3" v-for="(item,index) in list4" :key="index" @click="navigateTo(`/socials/video/video?status=${item.status}`)">
          <image src="@/static/images/tb.png" mode="aspectFill" class="thumb"></image>
          <view class="foot u-flex" v-if="item.status==1">
            <u-icon name="play-right-fill" color="#fff"></u-icon>
            <view class="u-p-l-10">18.3W</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <h-login top="50" ref="login"></h-login>
  <!-- 分享 -->
  <h-share ref="shareRef" :showLh="showLh" :otherType="otherType"></h-share>
  <!-- 个人主页分享拉黑 -->
  <u-popup :show="laheiOtShow" mode="center" @close="closeLafeiOt" :round="10" bgColor="#F6F6F6">
    <view class="fen_box_1">
      <view class="fen_box-content">
        对方将无法查看你的动态，也无法与你互动，对方不会收到被拉黑的通知
      </view>
      <view class="fen_box_btn">
        <view class="btn_cancle" @click="laheiOtShow = false">取消</view>
        <view class="btn_sure" @click="laheiSure">拉黑</view>
      </view>
    </view>
  </u-popup>
  <!-- 拉黑 -->
  <u-popup
    :show="laheiShow"
    mode="bottom"
    @close="closeLafei"
    :round="10"
    :closeable="true"
    bgColor="#F6F6F6"
  >
    <view>
      <view class="fen_box">
        <view class="fen_box_cen">
          <view class="lh_box_cen_l" @click.stop="negativeFeedback(1)">
            <image
              src="https://ossresource.miyingbl.com/uploads/20240307/f6b32f7b63ee1ecc427102897e0cde2c.png"
              class="fen_box_cen_l_img"
            ></image>
            <view class="fen_box_cen_l_te">不感兴趣</view>
          </view>
          <view class="lh_box_cen_l" @click.stop="defriend()">
            <image
              src="https://ossresource.miyingbl.com/uploads/20240307/5210aee89f7a4118171e4be748182b1f.png"
              class="fen_box_cen_l_img"
            ></image>
            <view class="fen_box_cen_l_te">不喜欢作者</view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
  <h-authpup
    ref="authpup"
    :h="systemInfo.statusHeight"
    type="top"
    @changeAuth="changeAuth"
    permissionID="CAMERA"
  ></h-authpup>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, nextTick } from 'vue'
import bus from '@/utils/bus'
import { onLoad, onReachBottom, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { showToast, navigateTo, navigateBack, formatDate } from '@/utils'
import { useMemberStore, useSystemStore } from '@/stores'
import { getUserInfoApi } from '@/services/my/login/index'
import { getUserIdentityTageApi, gethomepagePopularApi } from '@/services/my/user'
import { followUserApi, articleLstApi } from '@/api/social'
import { otherofficialInfo } from '@/api/home'
import { getTrendsInfo } from '@/api/trends'
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
import { uploadApi } from '@/utils/upLoad'
import { editUserApi } from '@/services/my/user'
const { proxy } = getCurrentInstance()
let store = useMemberStore()
const otherType = ref(true)
const shareRef = ref(null)
const showLh = ref(false)
const laheiOtShow = ref(false)
const laheiOt = ref(false)
const delShowLike = ref(false)
const delShowDy = ref(true)
const tops = ref(0)
const isShowShare = ref(true)
const showDyLoading = ref<boolean>(false) // 是否显示加载中
const userInfo = ref<any>({}) // 用户信息
const tagInfo = ref<any>({}) //标签信息
const current_tab = ref<number>(0)
const equipment = ref('')
const otherUid = ref('')
const dynamicList = ref([]) // 动态列表
const systemInfo = useSystemStore()
const textColor = ref('#fff') // header字体颜色
const headerBg = ref('transparent') // header背景色
const cardTop = ref(0) // 卡片距离顶部高度
const cardbottom = ref(0) // 卡片距离顶部高度
const xflag = ref(false) // header是否吸顶
const tabflag = ref(false) // header头像显示
const weebTop = ref(0) //tab吸顶高度
const navBg = ref()
const isShowEdit = ref(false)
const navGoEdit = () => {}
const dynamicParams = ref<any>({
  // 动态参数
  page: 1,
  limit: 20,
  uid: '',
})
const detail = ref({})
const uid = ref()
const is_self = ref(false)
const current = ref<number>(0) // tab索引
const flag = ref(0) // true 自己的 false 别人的
const tabs = ref([{ name: '动态' },{name:'视频'}])
const list4 = ref([{
  name: '育儿经验',
  status: 1
},
{
  name: '育儿经验',
  status: 1
},
{
  name: '育儿经验',
  status: 1
}
])
const last_page = ref(0) // 动态是否最后一页
const login = ref(null)
const changeDelIcon = ref(true)
const isShow = ref(false)
const finishedDy = ref(false)
const background = ref('')
const laheiShow = ref(false)
const token = ref(null)
function share(row) {
  if (!store.token) {
    login.value.open()
    return
  } else {
    if (row.content_type == 'kp') {
      row.path = `baby/science/index?id=${row.id}`
      row.imageUrl =
        row?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
    } else {
      row.summary = row?.content
      row.imageUrl =
        row?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
      row.path = `socials/detail/index?id=${row.id}`
    }
    showLh.value = true
    otherType.value = false
    row.path =
      row.content_type == 'dt'
        ? `socials/detail/index?id=${row.id}`
        : `baby/science/index?id=${row.id}`
    console.log('row', row)

    shareRef.value.open(row)
  }
}

/**
 * 进别人的主页，需要带uid过来
 */
const isDtOrKp = ref()
const url = ref()
const detailInfo = ref<any>({})
onLoad((options: any) => {
  const userStore = useMemberStore()
  console.log('options', options)

  uid.value = userStore?.userInfo?.user?.uid
  if (options.uid && options.uid == uid.value) {
    dynamicParams.value.uid = userStore?.userInfo?.user?.uid || ''
    userInfo.value = userStore?.userInfo || {}
    flag.value = 1
    isShow.value = false
    is_self.value = true

    getUserHomepage()
    uni.$on('getRefresh', (data) => {
      finishedDy.value = false
      refreshData()
    })
    uni.$on('update_num', (data) => {
      finished.value = false
      refreshData()
    })
    uni.$on('view_num', (data) => {
      refreshData()
    })
    uni.$on('updateUserInfo', (data) => {
      dynamicList.value = []
      getUserHomepage()
    })
    detail.value = userInfo.value.user
    detailInfo.value.uid = options.uid
    console.log('个人的')
  } else if (options.uid && options.uid != uid.value) {
    isDtOrKp.value = options?.type
    if (options?.type == 'kp') {
      tabs.value = [{ name: '科普' },{name:'视频'}]
      url.value = 'blapp/v1/user/homepagePopular'
    } else {
      tabs.value = [{ name: '动态' },{name:'视频'}]
      url.value = 'blapp/v1/user/homepageUpdates'
    }
    dynamicParams.value.uid = options.uid || ''
    flag.value = 0
    isShow.value = false
    delShowDy.value = false
    isShowShare.value = false
    changeDelIcon.value = false
    is_self.value = false
    otherUid.value = options.uid
    getUserSpace()
    getUserHomepage()
    uni.$on('view_num', (data) => {
      gethomepagePopular()
    })
    detailInfo.value.uid = options.uid

    console.log('他人的', background.value)
  }
  addListener()
})
onShow(() => {
  const userStore = useMemberStore()
  token.value = userStore?.token
  getUserIdentityTage()
})
var dyId = ref('')
const closeLafei = () => {
  laheiShow.value = false
}
const closeLafeiOt = () => {
  laheiOtShow.value = false
}
function navigateTos(url: string) {
  if (flag.value < 1) return
  navigateTo(url)
}
// 刷新广场列表
function refreshData() {
  dynamicParams.value.page = 1
  dynamicList.value = []
  likeList.value = []
  if (current_tab.value == 0) {
    getUserHomepage()
  }
}
/**
 * 显示登录
 */
function showLogin() {
  nextTick(() => {
    login.value.open()
  })
}
// 关注
async function follow() {
  try {
    const res: any = await followUserApi({
      to_uid: userInfo?.value.uid,
    })
    showToast(res.message)
    getUserSpace()
  } catch (error) {
    console.log(error)
  }
}
// 获取他人个人主页信息
async function getUserSpace() {
  const res: any = await otherofficialInfo({ uid: otherUid.value })
  userInfo.value = res.data.detail
  background.value = res.data?.center?.user?.background
    ? res.data?.center?.user?.background
    : 'https://ossresource.miyingbl.com/uploads/20240401/h-bl-app/1711961861361'
}
// 获取动态列表

async function getUserHomepage() {
  const userStore = useMemberStore()
  const system = useSystemStore()

  if (finishedDy.value) return
  // #ifdef H5
  equipment.value = 'h5'
  // #endif
  let p = {
    limit: 10,
    page: 1,
    type: isDtOrKp.value == 'kp' ? 2 : 1,
    status: 1,
    doctor_uid: otherUid.value,
  }
  showDyLoading.value = true
  const res = await articleLstApi(p)
  if (res.data.length == 0) {
    finishedDy.value = true
    showDyLoading.value = false
  } else {
    if (res.data && Array.isArray(res.data.list.data)) {
      showDyLoading.value = false
      last_page.value = res.data.list.last_page
      dynamicList.value.push(
        ...res.data.list.data.map((item) => ({
          ...item,
          content_type: isDtOrKp.value == 'kp' ? 'kp' : 'dt',
        })),
      )
      finishedDy.value = true
    }
  }
}
async function gethomepagePopular() {
  const userStore = useMemberStore()
  const system = useSystemStore()

  if (finishedDy.value) return
  // #ifdef H5
  equipment.value = 'h5'
  // #endif
  let p = {
    uid: dynamicParams.value.uid,
    equipment: userStore?.userInfo?.user?.equipment || 'h5',
    limit: dynamicParams.value.limit,
    page: dynamicParams.value.page,
    long: system.location.longitude || '',
    lat: system.location.latitude || '',
  }
  showDyLoading.value = true
  const res = await gethomepagePopularApi(p)
  if (res.data.length == 0) {
    finishedDy.value = true
    showDyLoading.value = false
  } else {
    if (res.data && Array.isArray(res.data.data)) {
      showDyLoading.value = false
      dynamicList.value.push(...res.data.data)
    }
  }
}
const likeList = ref([])

// 获取用户标签
async function getUserIdentityTage() {
  const userStore = useMemberStore()

  const res: any = await getUserIdentityTageApi({
    equipment: userStore?.userInfo?.user?.equipment || 'h5',
    user_id: otherUid.value || uid.value,
  })
  tagInfo.value = res.data
}
function close() {
  fenShow.value = false
  isShowLike.value = false
}
/**
 * 更新动态列表
 */
let zanDy = 0

function updateListDy(row, i, key) {
  const c = current_tab.value
  if (key == 'is_follow') {
    dynamicList.value.forEach((e) => {
      if (e.uid == row.uid) {
        console.log
        e.is_follow = e.is_follow == 0 ? 1 : 0
      }
    })
  } else if (key !== 'is_like') {
    return (dynamicList.value[i][key] = dynamicList.value[i][key] == 0 ? 1 : 0)
  } else if (key == 'is_like' && zanDy != 0) {
    dynamicList.value[i].zan_number--
    dynamicList.value[i][key] = 0
    zanDy = 0
  } else {
    zanDy = 1
    dynamicList.value[i].zan_number++
    dynamicList.value[i][key] = 1
  }
}
/**
 * 更新点赞列表
 */
let zan = 0

function updateList(row, i, key) {
  //   console.log(row)
  console.log('key', key)
  // const uid = row.uid ? row.uid : row.user_id
  const c = current_tab.value
  console.log('c', c)

  if (key == 'is_follow') {
    likeList.value.forEach((e) => {
      console.log('e', e)

      if (e.uid == row.uid) {
        console.log
        e.is_follow = e.is_follow == 0 ? 1 : 0
      }
    })
  } else if (key !== 'is_like') {
    return (likeList.value[i][key] = likeList.value[i][key] == 0 ? 1 : 0)
  } else if (key == 'is_like' && zan != 0) {
    likeList.value[i].zan_number--
    likeList.value[i][key] = 0
    zan = 0
  } else {
    zan = 1
    likeList.value[i].zan_number++
    likeList.value[i][key] = 1
  }
}
function toReport() {
  fenShow.value = false

  uni.navigateTo({
    url: '/pageT/report?id=' + detail.value?.id + '&type=8',
  })
}
function gotoDetail(row) {
  return
  // form=1为动态，2为科普
}

// 切换tab
function tabClick(row: any) {
  current_tab.value = row.index
  dynamicList.value = []
  likeList.value = []
  switch (row.index) {
    case 0: {
      finishedDy.value = false
      dynamicParams.value.page = 1
      getUserHomepage()
      break
    }
    case 1: {

      break
    }
  }
}
function toBack() {
  uni.navigateBack({
    delta: 1,
  })
}
// 相机权限
const authpup = ref(null)
function openAuth() {
  nextTick(() => {
    authpup.value.open()
  })
}
// 换封面
function changeAuth() {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: async (e) => {
      // tempFilePath可以作为img标签的src属性显示图片
      const url = await uploadApi(e.tempFilePaths[0])
      const res = await editUserApi({
        background: url,
      })
      if (res.message === '编辑成功~') {
      }
      showToast(res.message)
    },
  })
}
const isShowLike = ref(false)
// 打开分享
function toDetail() {
  if (!store.token) {
    nextTick(() => {
      login.value.open()
    })
  }
  if (store.token) {
    let item = {}
    if (userInfo.value.uid == store.userInfo.uid) {
      showLh.value = false
      item = {
        imageUrl: userInfo.value.avatar,
        title: `分享${userInfo.value.nickname}的个人主页`,
        summary: userInfo.value.autograph,
        path: `pages-users/my-page/index?uid=${store.userInfo.uid}`,
        uid: userInfo.value.uid,
        id: userInfo.value.uid,
      }
    } else {
      showLh.value = true
      item = {
        title: `分享${userInfo.value?.nickname}的个人主页`,
        summary: userInfo.value?.autograph ? userInfo.value?.autograph: '这个人超有意思，快来关注吧',
        imageUrl: userInfo.value.avatar,
        path: `pages-users/my-page/index?uid=${userInfo.value.uid}`,
        uid: userInfo.value.uid,
        id: userInfo.value.uid,
      }
    }
    otherType.value = true
    shareRef.value.open(item)
  }
}
onReachBottom(() => {
  if (current_tab.value == 0 && dynamicParams.value.page < last_page.value) {
    dynamicParams.value.page++
    getUserHomepage()
  }
})

function addListener() {
  uni.$on('social', () => {
    getUserHomepage()
  })
  uni.$on('followUser', (row) => {
    getUserSpace()
  })
  uni.$on('update_num', (row) => {
    const index = dynamicList.value.findIndex((item) => item.id == row.id)
    if (index != -1) {
      dynamicList.value[index].is_like = row.is_like
      dynamicList.value[index].is_collect = row.is_collect
      dynamicList.value[index].zan_number = row.zan_number
      dynamicList.value[index].comment_number = row.comment_number
    }
  })
}

const handleTabs = ({ index }: any) => {
  current.value = index
}
onReady(() => {
  getSystemInfo()
  getDocumentInfo()
})
onPageScroll((e) => {
  onPageScrollEvent(e)
})
/**
 * 获取系统信息
 */
const statusHeight = ref(0)

function getSystemInfo() {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight
    },
  })
}
/**
 * 页面滚动
 */
const isSrollTop = ref()
function onPageScrollEvent(e) {
  const scrollTop = e.scrollTop
  isSrollTop.value = Math.floor(e.scrollTop) * 2
  headerBg.value = scrollTop+50 > cardTop.value?'#fff':'transparent'
  textColor.value = scrollTop+50 > cardTop.value?'#333333':'#fff'
  navBg.value = scrollTop+50 > cardbottom.value?'#fff':'transparent'
  xflag.value = scrollTop+50 > cardTop.value?true:false
  tabflag.value = scrollTop+100 > cardbottom.value?true:false
}
// 滚动高度
const navBarScrollTop = ref()
// tabs高度
const contentTabHeight = ref()
// 获取高度
function getDocumentInfo() {
  const query1 = uni.createSelectorQuery()
  const query2 = uni.createSelectorQuery()
  query1
    ?.select('.card')
    ?.boundingClientRect((card_data: any) => {
      cardTop.value = card_data?.top
      cardbottom.value = card_data?.bottom
    })
    .exec()
  query2
    ?.select('.header')
    ?.boundingClientRect((header_data: any) => {
    console.log('header_data', header_data);

      weebTop.value = header_data?.bottom+20+tops.value
    })
    .exec()
}
</script>

<style scoped lang="scss">
.pages {
  background-size: 100% 447rpx;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #f6f6f6;
  width: 100%;
  min-height: 100vh;
  .bgColor {
    .header {
      width: 750rpx;
      margin-bottom: 13rpx;
      padding: 0 26rpx;
      .left {
        // width: 14rpx;
        // height: 27rpx;
        .head_img {
          width: 14rpx;
          height: 27rpx;
        }
      }
      .middle-avatar {
        margin-right: 20rpx;
        image {
          width: 81rpx;
          height: 81rpx;
        }
      }
      .middle {
        margin-right: 120rpx;
        .user_tags {
          image {
            width: 113rpx;
            height: 27rpx;
            display: block;
            margin-right: 10rpx;
          }
        }
      }
      .right-follow {
        margin-right: 38rpx;

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
      .right {
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
    .card {
      min-height: 300rpx;
      background: #fefefe;
      margin-top: 140rpx;
      position: relative;
      z-index: 22;
      .shopwindow {
        width: 100%;
        height: 70rpx;
        display: flex;
        align-items: center;

        image {
          width: 70rpx;
          height: 70rpx;
          background: #eee;
          border-radius: 6rpx;
          margin-right: 10rpx;
        }

        .right {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #000;
          }

          .num {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }

      .headers {
        min-height: 100rpx;
        position: relative;
        .avatar {
          width: 140rpx;
          height: 140rpx;
          background: #fff;
          border-radius: 50%;
          margin-top: -40rpx;
          image{
            width: 130rpx;
            height: 130rpx;
          }
        }

        .btn-sure {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 140rpx;
          height: 56rpx;
          background: #00C1B9;
          border-radius: 28rpx 28rpx 28rpx 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
        .btnFollow {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 140rpx;
          height: 56rpx;
          background: #fff;
          border: 1rpx solid #00C1B9;
          border-radius: 38rpx;
          opacity: 1;
          font-size: 24rpx;
          font-weight: 500;
          color: #00C1B9;
        }

        .middle_tag {
          font-weight: 500;
          font-size: 24rpx;
          // color: #ffffff;
          // display: flex;
          // align-items: center;
        }

        .name {
          font-size: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .sign {
        .inputurl {
          width: 32rpx;
          height: 32rpx;

          image {
            width: 32rpx;
          }
        }

        .autograph {
          max-width: 360rpx;
          margin-right: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
        }
      }

      .l-h-1 {
        line-height: 1;
      }
    }
    .week-tabsb {
      // padding: 17rpx 0 20rpx 22rpx;
      .tabs-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-direction: inherit;
      }
    }
    .list-content {
      width: 702rpx;

      .content-1 {
        width: 702rpx;
        margin-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
          width: 340rpx;
          height: 337rpx;
          background: #ffffff;
          border-radius: 16rpx;
          padding: 11rpx;
          opacity: 1;
          margin-bottom: 16rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 15rpx;
          overflow: hidden;

          & > image {
            width: 316rpx;
            height: 148rpx;
            background: #eee;
            border-radius: 8rpx;
          }

          .title {
            flex: 1;
            padding-top: 20rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #000000;
          }

          .info {
            width: 100%;
            height: 35rpx;
            display: flex;
            align-items: center;

            .left {
              flex: 1;
              height: 100%;
              display: flex;
              align-items: center;

              image {
                width: 35rpx;
                height: 35rpx;
                border-radius: 50%;
                background-color: #eee;
                margin-right: 10rpx;
              }

              .name {
                flex: 1;
                font-size: 26rpx;
                font-weight: 500;
                color: #000000;
                line-height: 1;
              }
            }

            .right {
              flex: 1;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-end;

              .num {
                font-size: 24rpx;
                font-weight: 500;
                color: #666666;
              }
            }
          }
        }
      }

      .content-2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 341rpx;
          height: 377rpx;
          background: #ffffff;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          opacity: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 20rpx;
          margin-top: 20rpx;
          overflow: hidden;

          image {
            width: 341rpx;
            height: 196rpx;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            opacity: 1;
          }

          .title {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0 22rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
          }

          .info {
            width: 100%;
            height: 35rpx;
            padding-left: 22rpx;
            display: flex;
            align-items: center;

            image {
              width: 35rpx;
              height: 35rpx;
              border-radius: 50%;
              margin-right: 20rpx;
            }

            .name {
              font-size: 20rpx;
              font-weight: 400;
              color: #333333;
              margin-right: 12rpx;
            }

            .hospital {
              font-size: 20rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }

      & > :nth-child(2n + 1) {
        margin-right: 20rpx;
      }

      .content-3 {
        width: 100%;
        display: flex;
        flex-direction: column;

        .item {
          width: 702rpx;
          background: #ffffff;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          opacity: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 20rpx;
          margin-top: 20rpx;

          .info {
            width: 100%;
            height: 70rpx;
            display: flex;
            align-items: center;

            image {
              width: 72rpx;
              height: 72rpx;
              border-radius: 50%;
              margin-right: 20rpx;
              background-color: #eee;
            }

            .name {
              font-size: 28rpx;
              font-weight: 500;
              color: #999999;
            }
          }

          .content {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            margin: 20rpx 0;
          }

          .images {
            display: flex;
            flex-wrap: nowrap;

            image {
              width: 207rpx;
              height: 186rpx;
              background: #d9d9d9;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              opacity: 1;
              margin-right: 20rpx;
            }
          }
        }
      }

      .content-4 {
        width: 100%;
        display: flex;
        flex-direction: column;

        .item {
          width: 702rpx;
          background: #ffffff;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          opacity: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 20rpx;
          margin-top: 20rpx;

          .info {
            width: 100%;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            image {
              width: 72rpx;
              height: 72rpx;
              border-radius: 50%;
              margin-right: 20rpx;
              background-color: #eee;
            }

            .name {
              font-size: 28rpx;
              font-weight: 500;
              color: #999999;
            }

            .title {
              font-size: 28rpx;
              font-weight: 500;
              color: #999999;
              flex: 1;
              padding-left: 10rpx;
            }
          }

          .content {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            margin: 20rpx 0;
          }

          .images {
            display: flex;
            flex-wrap: nowrap;

            image {
              width: 207rpx;
              height: 186rpx;
              background: #d9d9d9;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              opacity: 1;
              margin-right: 20rpx;
            }
          }

          .footer {
            width: 100%;
            height: 36%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 26rpx;

            .footer_item {
              display: flex;
              align-items: center;

              .icon_1 {
                width: 26rpx;
                height: 26rpx;
              }

              .icon_3 {
                width: 25rpx;
                height: 24rpx;
              }

              text {
                margin-left: 15rpx;
                font-weight: 500;
                font-size: 26rpx;
                color: #333333;
              }
            }
          }
        }

        .zan-text {
          color: #a9a9a9;
          text-align: center;
          padding: 12rpx 0;
          font-size: 23rpx;
        }
      }
    }
  }
  .h_header {
    min-height: 447rpx;
    // background: url('@/static/my/edit-form-header-bg.png') center center;
    background-size: 100% 100%;

    .header_top {
      padding-top: 22rpx;
      display: flex;
      align-items: center;

      .left {
        width: 14rpx;
        height: 27rpx;
        margin-left: 31rpx;

        .head_img {
          width: 14rpx;
          height: 27rpx;
        }
      }

      .right_changeImg {
        margin-left: 100rpx;

        view {
          margin-top: 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .right_share {
        margin-left: 43rpx;

        view {
          margin-top: 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .user {
        margin-left: 258rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 36rpx;
        color: #ffffff;
      }
    }

    .head_title {
      padding: 24rpx 0;
      font-size: 34rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 40rpx;
      text-align: center;
      float: left;
      width: 598rpx;
    }
  }

  .none {
    text-align: center;
    padding-top: 200rpx;

    image {
      width: 240rpx;
      height: 200rpx;
    }

    .none_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #ababab;
      line-height: 36rpx;
    }

    .none_btn {
      width: 241rpx;
      height: 69rpx;
      background: #ffb300;
      border-radius: 43rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 69rpx;
      text-align: center;
      margin: 80rpx auto;
    }
  }
}
.pages::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( 180deg, rgba(51,51,51,0.3) 100%, rgba(51,51,51,0) 0%);
  width:100%;
  height: 447rpx;
  z-index: 1;
  pointer-events: none;
}
.tagContent{
}

.fen_box_title {
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 90rpx;
  height: 90rpx;
}

.fen_box {
  width: 100%;
  border-radius: 10rpx 10rpx 0 0;
  padding: 0 24rpx 24rpx;

  .fen_box_cen {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    padding-top: 20rpx;

    .lh_box_cen_l {
      width: 216rpx;
      padding: 10rpx 0 15rpx;
      background: #ffffff;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      text-align: center;
      margin: 10rpx 20rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;

      image {
        width: 75rpx;
        height: 75rpx;
        display: block;
        margin: 0 auto;
      }
    }

    .fen_box_cen_l {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 150rpx;
      margin: 0;
      line-height: 1;
      background-color: transparent;

      .fen_box_cen_l_img {
        width: 100rpx !important;
        height: 100rpx !important;
        border-radius: 50%;
      }

      .fen_box_cen_l_te {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;
      }
    }
  }
}

.btn-sure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140rpx;
  height: 56rpx;
  // background: #0074fc;
  background: #00C1B9;
  border-radius: 38rpx;
  opacity: 1;
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;
}
.btnFollow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130rpx;
  height: 55rpx;
  background: #fff;
  border: 1rpx solid #00C1B9;
  border-radius: 38rpx;
  opacity: 1;
  font-size: 24rpx;
  font-weight: 500;
  color: #00C1B9;
}

.delPopup {
  width: 562rpx;
  height: 256rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 46rpx 70rpx;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;

  .delText {
    color: #999999;
    font-size: 28rpx;
    margin-bottom: 50rpx;
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .btn-cancle {
      width: 163rpx;
      height: 57rpx;
      background: #ffffff;
      border-radius: 29rpx;
      color: #ffb300;
      border: 1px solid #ffb300;
      text-align: center;
      line-height: 57rpx;
    }

    .btn-confirm {
      width: 163rpx;
      height: 57rpx;
      background: #ffb300;
      border-radius: 29rpx;
      color: #ffffff;
      border: 1px solid #ffb300;
      text-align: center;
      line-height: 57rpx;
    }
  }
}

.fen_box_1 {
  width: 571rpx;
  height: 256rpx;
  background: #ffffff;
  border-radius: 26rpx 26rpx 26rpx 26rpx;
  padding-top: 42rpx;

  .fen_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #000000;
  }

  .fen_box-content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    padding: 18rpx 16rpx 36rpx 36rpx;
    text-align: center;
  }

  .fen_box_btn {
    display: flex;
    justify-content: space-around;

    .btn_cancle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffb300;
      background: #ffffff;
      width: 163rpx;
      height: 58rpx;
      border-radius: 29rpx;
      border: 1px solid #ffb300;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn_sure {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffffff;
      background: #ffb300;
      width: 163rpx;
      height: 58rpx;
      border-radius: 29rpx;
      border: 1px solid #ffb300;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.uni-nav-bar-text {
  font-weight: 800 !important;
  font-size: 36rpx !important;
}
.list2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.listItem3 {
  width: 248rpx;
  height: 332rpx;
  background: #D8D8D8;
  position: relative;

  .thumb {
    display: block;
    width: 248rpx;
    height: 332rpx;
    display: block;
  }

  .more {
    position: absolute;
    top: 10rpx;
    right: 15rpx;
  }

  .foot {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, #202020 100%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    padding-left: 15rpx;
    padding-bottom:10rpx;
  }
}
.reservation{
  margin-right: 200rpx;
  .reservat_icon{
    margin-right: 21rpx;
    
  }
  .reservat_text{
    .reservat_top{
      margin-bottom: 12rpx;
    }
  }

}
</style>
